<template>
  <div>
    <el-col :span="24" class="action-bar">
      <!--<el-input clearable @clear="inputClear" placeholder="姓名" style="width:220px;margin-right: 12px"
                v-model="searchParams.keyword"></el-input>
      <el-button type="primary" @click="search">检索</el-button>-->
      <el-button v-if="type==1" type="primary" @click="showAddTyDistributorDialog">添加</el-button>
    </el-col>

    <el-table stripe :data="tableData" v-loading="tableLoadingShow" element-loading-text="加载中"
              style="width: 100%" class="el_table_style" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
      <el-table-column label="序号" prop="id"></el-table-column>
      <el-table-column label="用户昵称" prop="name"></el-table-column>
      <el-table-column label="头像" prop="img_url">
        <template slot-scope="scope">
          <img :src="scope.row.img_url" style="width: 60px;height: 60px;border-radius: 50%">
        </template>
      </el-table-column>
      <!--<el-table-column label="姓名" prop="name"></el-table-column>-->
      <el-table-column label="手机" prop="phone"></el-table-column>
      <el-table-column label="分销商等级" prop="distribution_name"></el-table-column>
      <!--<el-table-column label="累计获得佣金" prop=""></el-table-column>-->
      <el-table-column label="账户余额" prop="available_money"></el-table-column>
      <el-table-column label="入驻时间" prop="created_at"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <router-link :to="{path: 'distributor_detail',query: {user_id: scope.row.user_id,tab: 'second'}}" style="margin-right: 10px">
            <el-button type="text">佣金明细</el-button>
          </router-link>
          <router-link :to="{path: 'distributor_detail',query: {user_id: scope.row.user_id,tab: 'third'}}" style="margin-right: 10px">
            <el-button type="text">下级分销商</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>


    <div class="page-code" style="margin-top: 20px">
      <el-pagination
        background :current-page="searchParams.page" :page-size="searchParams.limit" layout="prev, pager, next" :total="pageTotal" @current-change="pageChange">
      </el-pagination>
    </div>

    <!-- 添加模态款 -->
    <el-dialog title="添加特约分销商" :visible.sync="tyDisDialogShow">
      <div>
        <el-form ref="form" :model="tyAddForm" label-width="120px">
          <el-form-item label="手机号" :required="true">
            <el-input v-model="tyAddForm.phone" class="input_css" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="名称" :required="true">
            <el-input v-model="tyAddForm.name" class="input_css" placeholder="请输入名称"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div style="text-align: center;">
        <el-button type="success" @click="setDistributionSignedUser()">{{'添加'}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
    export default {
        name: "distributor",
        props: {
          type: '',
          updateFlag: ''
        },
        watch: {
          updateFlag(val){
            this.getDistributionUserList()
          }
        },
        data() {
          return {
            tableLoadingShow: false,
            searchText: '',
            searchParams: {
              page: 1,
              limit: 8,
              type: '',//0为普通分销商，1为特约分销商
              keyword: ''
            },
            pageTotal: 0,
            tableData: [],
            tyDisDialogShow: false,
            tyAddForm: {
              phone: '',
              name: ''
            }
          }
        },
        mounted() {

        },
      methods: {

          search() {
            this.searchParams.page = 1
            this.getDistributionUserList()
          },

          inputClear() {

          },

          //获取分销列表
          async getDistributionUserList(){
            this.tableLoadingShow = true;
            let params = {
              limit: this.searchParams.limit,
              page: this.searchParams.page,
              type: this.type,
              keyword: this.searchParams.keyword
            }
            const res = await this.$api.getDistributionUserList(params);
            if(res.data.level=='success'){
              let list = res.data.data;
              this.tableData = list;
              this.pageTotal = res.data.page_info.total
            }else {
              this.$message.error(res.data.message)
            }
            this.tableLoadingShow = false;
          },

          pageChange(e) {
            this.searchParams.page = e
            this.getDistributionUserList()
          },


          showAddTyDistributorDialog() {
            this.tyDisDialogShow = true
          },

          async setDistributionSignedUser(){
            const res = await this.$api.setDistributionSignedUser(this.tyAddForm);
            if(res.data.level=='success'){
              this.tyDisDialogShow = false
              this.$message.success(res.data.message)
            }else {
              this.$message.error(res.data.message)
            }
          },

        },
    }
</script>

<style scoped lang="scss">
  .action-bar{
    background-color: #f2f2f2;
    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }
</style>

<style scoped>
  /deep/.el-table td, /deep/.el-table th {
    text-align: center;
  }
  /deep/.el-table .warning-row {
    background: #f8f9fa;
  }

  /deep/.el-table .success-row {
    background: #ffffff;
  }
  /deep/.el_table_style{
    border: 1px solid #dee2e6;
  }
  /deep/.el-table td {
    border: none;
  }
</style>
